<template>
  <div class="index">
    <div class="header">
      <div class="brand"></div>
      <div class="rule" @click="ruleSwitch"></div>
    </div>
    <div class="main">
      <div class="hero"></div>
      <div @click="begin" class="button"></div>
    </div>
    <div class="texture"></div>
  </div>
</template>

<script>
import store from '@/store'
export default {
  data () {
    return {
      popupState: false
    }
  },
  methods: {
    begin () {
      store.commit('setState', { key: 'examState', val: true })
    },
    ruleSwitch () {
      if (store.state.popIndex) store.commit('setState', { key: 'popIndex', val: 0 })
      else store.commit('setState', { key: 'popIndex', val: 1 })
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '../assets/styles/index.styl'
.index {
  width 100vw
  overflow hidden
}
.header {
  position relative
  z-index 1
  padding 15px
  .brand {
    display inline-block
    height 50px
    width 100px
    display inline-block
    background-image url('../assets/images/brand.png')
    background-position center
    background-size contain
    background-repeat no-repeat
  }
  .rule {
    display inline-block
    height 100px
    width 50px
    float right
    display inline-block
    background-image url('../assets/images/index_rule.png')
    background-position center
    background-size contain
    background-repeat no-repeat
  }
}
.main {
  position absolute
  width 100%
  height 50%
  bottom 0
  z-index 1
  .button {
    width 180px
    height 80px
    display inline-block
    background-image url('../assets/images/index_button.png')
    background-position center
    background-size contain
    background-repeat no-repeat
    position absolute
    bottom 25%
    left 50%
    transform translateX(-50%)
  }
  .hero {
    // position absolute
    // bottom 0
    width 100%
    height 600px
    display inline-block
    background-image url('../assets/images/index_hero.png')
    background-position -30px bottom
    background-size contain
    background-repeat no-repeat
    display none
  }
}
.popup {
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background rgba(0, 0, 0, 0.3)
  z-index 100
  overflow hidden
  .inner {
    height 50%
    width 100%
    background #fff
    position absolute
    bottom 0
    transform translateY(0%)
    transition 0.3s 0.1s ease
    &.act {
      transform translateY(0%)
    }
  }
}
.texture {
  width 100vw
  height 100vh
  position absolute
  bottom 0
  left 0
  z-index 0
  display inline-block
  background-image url('../assets/images/index_texture.jpg')
  &:before {
    background-image url('../assets/images/index_main.jpg')
    background-position center bottom
    background-size contain
    background-repeat no-repeat
    content ''
    display inline-block
    position absolute
    top 0
    bottom 0
    left 0
    right 0
  }
}
</style>